<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="42%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;" v-if="!is_confirm">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">导入员工</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="flex flex-row items-center text-f16 mt-w50">
                        <div>请使用员工模板文件进行上传，否则上传失败！</div>
                        <el-button class=" text-f16" type="text" @click="action_download">点击下载</el-button>
                    </div>
                    <el-upload class="upload-demo" :action="apiJson.baseUrl + apiJson.url" :headers="headers" :limit="1"
                        :multiple="false" :data="{ 'company': company_id }" :name="'uploadFile'" :show-file-list="false"
                        accept="application/vnd.ms-excel" :on-success="action_upload_success"
                        :on-error="action_upload_error" ref="upload" :before-upload="action_select_file">
                        <el-button type="primary" class=" bg-cmain mt-w30">点击上传</el-button>
                    </el-upload>
                </div>


                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;" v-if="is_confirm">
                  <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                    <div class="text-f14">导入员工</div>
                    <i class="el-icon-circle-close  cursor-pointer" @click.stop="close()"></i>
                  </div>
                  <div class="items-center text-f16 mt-w50">
<!--                    <p>回收数据：{{confirm_info.old}}条</p>-->
                    <p>重复数据：{{confirm_info.same}}条</p>
                    <p>新增数据：{{confirm_info.new}}条</p>
                  </div>
                  <div class="flex flex-row items-center text-f16 mt-w50">
                    <el-button type="primary" class="bg-cmain" @click="action_upload_confirm">确认提交</el-button>
                    <el-button @click="action_upload_cancel">取消</el-button>
                  </div>

                </div>

            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import api from "@/api/nyApiJson";
import ny_config from "@/api/nyConfig"
import nyNetwork from "@/api/nyBaseNetwork";
import DZModelStaff from "@/views/员工管理/model/DZModelStaff";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import nyMessageToast from "@/utils/NYMessageToast";

@Component
export default class UiDialogImportStaff extends Vue {
    @Prop() company;
    @Prop() is_showDialog;
    is_dialog_show = false;
    company_id = "";
    is_confirm = false;
    confirm_info = {};
    logId = "";
    apiJson: ny_config = api["导入员工"];
    headers = {
        "Authorization": this.$store.state.user.token
    }
    loading = null;


    created() { }

    mounted() {
        console.log(this.apiJson.baseUrl + this.apiJson.url)
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }
    @Watch("company")
    watchData(value: any, oldValue: string) {
        this.company_id = value;
    }

    action_download() {
        nyNetwork.download("下载员工模板", "")
    }
    action_upload_success(response, file, fileList) {
        (this.$refs.upload as any).clearFiles();
        if (response.code == 200) {
            nyMessageToast.success("上传成功")
            this.is_confirm = true;
            this.confirm_info = response.data;
            this.logId = response.data.logId;
        } else {
            nyMessageToast.error("上传失败")
        }
        if (this.loading) this.loading.close();
        this.$emit('nydialog_submit', '');
    }
    action_upload_error(response, file, fileList) {
        (this.$refs.upload as any).clearFiles();
        nyMessageToast.error("导入失败")
        if (this.loading) this.loading.close();
        this.close();
    }
    action_select_file(file) {
        this.loading = this.$loading({
            lock: true,
            text: '上传中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
    }
    action_upload_confirm(){
        nyNetwork.net("确认导入员工",{company:this.company_id,logId:this.logId}, data => {
            this.action_upload_cancel();
            this.$emit('nydialog_submit');
        })
    }
    action_upload_cancel(){
        this.confirm_info = {};
        this.logId = "";
        this.is_confirm = false;
        this.close();
    }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    min-height: 22vw;
    padding: 0px;
}

/deep/ .dialog-tips {
    margin-top: 0 !important;
}

/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    padding-top: 10vh;
    background: none;
}
</style>
